<template>
	<view class="page">
		<view class="text-white" style="font-size:45rpx;padding-top:200rpx;padding-bottom:60rpx;margin-left:100rpx;">
			<view>您好</view>
			<view class="margin-top-xs">欢迎使用杀虫灯系统</view>
		</view>
		
		<view class="bg-white" style="border-top-left-radius:30rpx;border-top-right-radius:30rpx;padding-top:70rpx;height:80vh;">
			<view class="common-shadow round flex justify-start padding margin-lr-xl">
				<view class="cuIcon-exit margin-left" style="font-size:40rpx;"></view>
				<input class="text-lg margin-left" id="userNameInput" @input="changeUserNameInput" :adjustPosition="true"
					maxlength="300" :cursor-spacing="10" :value="userName" :placeholder="'请输入账号'" />
			</view>
			
			<view class="common-shadow round flex justify-start padding margin-lr-xl margin-top-lg">
				<view class="cuIcon-lock margin-left" style="font-size:40rpx;"></view>
				<input class="text-lg margin-left" id="passwordInput" :type="attention ? 'text':'password'" @input='changePasswordInput'
					:adjustPosition="false" :focus="focusPasswordInput" maxlength="300" :cursorSpacing="10"
					:value="password" :placeholder="'请输入密码'"/>
			</view>
			
			<view @tap="changeModule(isShowModule === 'login' ? 'register' : 'login')"  class="text-df flex justify-end align-center margin-right-xl margin-tb-lg">
				<text class="">{{isShowModule === 'login' ? '注册' : '登录'}}</text>
			</view>
			
			<view  class="margin-lr-xl">
				<view class="flex flex-direction">
					<button v-if="isShowModule === 'login'" class="cu-btn round lg bg-red-color text-white text-df" @tap="tapPswLogin">登录</button>
					<button v-if="isShowModule === 'register'" class="cu-btn round lg bg-red-color text-white text-df" @tap="tapRegister">注册</button>
				</view>
			</view>
			
			<view v-if="isShowModule === 'login' && userList.length > 0">
				<view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="margin-left">历史登录</text>
					</view>
				</view>
				<view class="cu-list menu-avatar">
					<view class="cu-item cur" v-for="(item,index) in userList" :key="index" @tap="userClick(item)">
						<view class="cu-avatar round lg" :style="[{backgroundImage:`url(https://dt.ztn-tech.com:3000/ztIot${item.avatar})`}]">
						</view>
						<view class="content">
							<view>
								<view class="text-cut">
									{{item.userName}}
								</view>
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">{{item.createTime}}</view>
							</view>
						</view>
						<view class="action" @tap.stop="deleteLogintrace(item)">
							<view class="text-gray cuIcon-close"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hideLoading,
		showLoading,
		showToast,
		showModal
	} from '@/util/toast'
	import {
		formatDate
	} from '@/util/formatTime'
	import * as storage from '@/util/storage'
	import myConfig from '@/myConfig'
	import md5 from 'js-md5';
	import * as loginApi from '@/api/dmIot/loginApi'
	import * as deviceApi from '@/api/dmIot/deviceApi.ts'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	export default {
		data() {
			return {
				// companyIconUrl: storage.getCompanyIconUrl(),
				openid: '',
				userName: '',
				password: '',
				focusPasswordInput: false,
				attention: false,
				userList:[],
				isShowModule:"login"
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.language = 'zh'
				this.getOpenId()
			},
			changeModule(module){
				this.isShowModule = module
			},
			tapCurrentVersion() {
				showModal(this.$t('version'), myConfig.app.version, false, this.$t('confirm'), this.$t('cancel'), (
					res) => {
					return
				})
			},
			changeUserNameInput(e) {
				this.userName = e.detail.value.replace(/\s/g, '')
			},
			cleanUserName() {
				this.userName = ''
			},
			changePasswordInput(e) {
				this.password = e.detail.value.replace(/\s/g, '')
			},
			changeAttention() {
				this.attention = !this.attention
				this.focusPasswordInput = true
			},
			tapPswLogin() {
				ztIotApi.login({
					username: this.userName,
					password: this.password,
				}).then((res) => {
					let {
						code,
						success,
						msg,
						token,
						userid
					} = res
					if (code === 200 && success) {
						storage.setToken(token)
						storage.setUserId(userid)
						this.logintrace()
						uni.redirectTo({
							url: `/pages/nav/nav`
						})
					}
				})
			},
			tapRegister(){
				ztIotApi.register({
					username: this.userName,
					password: this.password,
					"system":"insecticidalLamp"
				}).then((res) => {
					let {
						code,
						success,
						msg,
						token,
						userid
					} = res
					if (code === 200 && success) {
						storage.setToken(token)
						storage.setUserId(userid)
						this.logintrace()
						uni.redirectTo({
							url: `/pages/nav/nav`
						})
					}
				})
			},
			logintrace() {
				let openId = this.openId
				let userId = storage.getUserId()
				ztIotApi.logintrace({
					openId,
					userId
				}).then((res) => {
					let {
						success,
					} = res
					if(success){
						showToast(this.$t('bind') + this.$t('success'), 'none', 2000, false)
					}
				})
			},
			getOpenId() {
				uni.login({
					success: (res) => {
						ztIotApi.getOpenId({
							code:res.code,
						}).then((res) => {
							const {
								msg,
								success
							} = res
							if (success) {
								this.openId = msg
							}
							this.getLogintraceList()
						})
					},
					fail: (err) => {
						showToast(this.$t('fail'), 'none', 2000, false)
					}
				});
			},
			getLogintraceList() {
				let openId = this.openId
				ztIotApi.getLogintraceList({
					openId
				}).then((res) => {
					const {
						code,
						data,
						msg,
						success
					} = res
					if(success){
						this.userList = data
					}
				})
			},
			deleteLogintrace(item){
				let id = item.id
				ztIotApi.deleteLogintrace({
					id
				}).then((res) => {
					let{
						code,
						success
					} = res
					if(success){
						showToast(this.$t('delete') + this.$t('success'), 'none', 2000, false)
					}
				})
			},
			userClick(item){
				showLoading(this.$t('loading'), false)
				uni.login({
					success: (res) => {
						loginApi.login({
							code:res.code,
							traceId: item.id,
						}).then((res) => {
							let {
								code,
								success,
								msg,
								token,
								userid
							} = res
							if (code === 200 && success) {
								hideLoading()
								storage.setToken(token)
								storage.setUserId(userid)
								uni.redirectTo({
									url: `/pages/nav/nav`
								})
							}
						})
					},
					fail: (err) => {
						showToast(this.$t('fail'), 'none', 2000, false)
					}
				});
			},
		}
	}
</script>

<style scoped>
	.page {
		min-height: 100vh;
		background-image:linear-gradient(to right bottom, #ff0006, #ff0035);
	}
	
	.common-shadow {
		box-shadow: 0upx 10upx 10upx -4upx rgba(0, 0, 0, 0.1);
	}
	
	.bg-red-color {
		background-color: #ff0000;
	}
	
	.ztnCustom-companyInfo {
		padding-top: 40rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.ztnCustom-companyInfo text {
		opacity: 0.8;
	}

	.ztnCustom-companyInfo image {
		width: 200rpx;
		height: 200rpx;
	}

	.ztnCustom-middle-line:before {
		content: '';
		display: block;
		height: 2rpx;
		width: 100%;
		background-color: #ddd;
		/*颜色需与主题大背景色一致*/
		position: relative;
		top: 18rpx;
		left: 0;

	}

	.ztnCustom-line-text {
		display: inline-block;
		background: #fff;
		padding: 0 20rpx 0 20rpx;
		position: relative;
	}

	.custom-button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1;
		border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0);
	}

	.custom-button::after {
		border: 0;
	}

	.custom-button-hover {
		background-color: #fff;
	}
</style>
